let VSHADER_SOURCE = `
    attribute vec4 a_Position;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = 10.0;
    }
`;
let FSHADER_SOURCE = `
    void main(){
        gl_FragColor = vec4(1.0,0.8,0.8,1.0);
    }
`;
function main() {
    let canvas = document.getElementById('webgl');
    let gl = getWebGLContext(canvas);
    let init = !initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)
    if (init) {
        return console.error('error');
    }
    let a_Position = gl.getAttribLocation(gl.program, 'a_Position');

    canvas.onmousedown = (ev) => {
        click(ev, gl, canvas, a_Position);
    }
    gl.clearColor(0.0, 0.8, 0.8, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
}
let g_points = [];

function click(ev, gl, canvas, a_Position) {
    //canvas中心为坐标原点
    let x = ev.clientX;
    let y = ev.clientY;
    let rect = ev.target.getBoundingClientRect();
    x = ((x - rect.left) - canvas.height / 2) / (canvas.height / 2);
    y = (canvas.width / 2 - (y - rect.top)) / (canvas.width / 2);
    console.log(x, y);
    g_points.push(x);
    g_points.push(y);
    // gl.clear(gl.COLOR_BUFFER_BIT);
    for (let i = 0; i < g_points.length; i += 2) {
        const x = g_points[i];
        const y = g_points[i + 1];
        gl.vertexAttrib3f(a_Position, x, y, 0.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}